{% extends 'admin/admin_base.html' %}

{% block content %}
    <div class="container">
        <h3>Movies List</h3>

        <div style="display: flex;justify-content: space-between;margin: 8px 0">
            <h6>Total：{{ movies.count }}，Page: {{ movies.page }}</h6>

            <button class="btn btn-primary btn-sm" onclick="location.href='/admin_movie_add'">Add</button>
        </div>

        <div style="margin: 8px 0">
            <script>
                document.write(Pager({
                    totalCount: {{ movies.count }}, 		// 总条数
                    pageSize: 10,    			// 每页显示 n条，默认10
                    buttonSize: 5,   		// 显示按钮个数，默认10
                    pageParam: 'page',   		// 页面的参数名为'page'，默认为'page'
                    className: 'pagination', //分页的样式
                    {#prevButton: '往前',     //上一页按钮#}
                    {#nextButton: '往后',     //下一页按钮#}
                    firstButton: 'First',      //第一页按钮
                    lastButton: 'Last',       //最后一页按钮
                }));
            </script>
        </div>

        <table class="table table-bordered">
            <thead>
            <tr>
                <th>#</th>
                <th>Img</th>
                <th>Name</th>
                <th>Genres</th>
                <th>Directors</th>
                <th>Actors</th>
                <th>Desc</th>
                <th>Year</th>
                <th>Operate</th>
            </tr>
            </thead>

            <tbody>
            {% for movie_item in movies.list %}
                <tr>
                    <td>{{ loop.index }}</td>
                    <td style="font-size: 20px">
                        {% if movie_item.image_path %}
                            <img alt="" src="{{ url_for('static',filename=movie_item.image_path) }}"
                                 style="max-width: 100px;max-height: 100px">
                        {% endif %}
                    </td>
                    <td style="font-size: 20px">{{ movie_item.name }}</td>
                    <td>
                        <ul style="padding-left: 8px">
                            {% for genre_item in movie_item.get_genres() %}
                                <li>{{ genre_item.value }}</li>
                            {% endfor %}
                        </ul>
                    </td>
                    <td>{{ movie_item.directors }}</td>
                    <td>{{ movie_item.actors }}</td>
                    <td>{{ movie_item.desc }}</td>
                    <td>{{ movie_item.year }}</td>
                    <td>
                        <div class="my_flex">
                            <button class="btn btn-warning btn-sm"
                                    onclick="location.href='/admin_movie_update/{{ movie_item.id }}'">
                                Edit
                            </button>
                            <button class="btn btn-danger btn-sm"
                                    onclick="location.href='/admin_movie_del/{{ movie_item.id }}'"
                                    style="margin-left: 20px">Del
                            </button>
                        </div>
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>


    </div>

{% endblock %}